{% extends 'IcsocUIBundle::page.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@IcsocUIBundle/Resources/public/css/bootstrap.my.css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
<button class="btn btn-info btn-sm btn-bold" id="open_window" style="margin: 2px;display: none;">
    <i class="ace-icon fa fa-th-large red2"></i> 全屏窗口
</button>
<button class="btn btn-success btn-sm" id="open_fullscreen" style="margin: 2px;display: none;" onclick="fn_fullscreen();">
    <i class="ace-icon fa fa-arrows-alt blue"></i> 全屏
</button>
<button class="btn btn-success btn-sm pull-right" id="close_fullscreen" style="margin: 2px;display: none;" onclick="close_fullscreen();">
    <i class="ace-icon fa fa-arrows red2"></i> 退出全屏
</button>
<div id="fullscreen" style="margin:0 auto;background:#ffffff;">
{% if user_type == 0 %}
<div class="row" style="margin: 1px;">
    {% if is_call_show == 1 %}
        <!-- 显示呼叫中心话务数据Begin -->
        <div class="row" style="margin:1px;">
            {% for key,value in call_center %}
            <div class="progress" style="height:80px">
                {% for call in value %}
                <div class="progress-bar" style="background-color: {{ call.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.call_rate[key] }}">
                    <span class="sr-only"> 10% Complete (success) </span>
                    <span style="font: 180% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important">{{ call.name }}</span><br>
                    <span style="font: 200% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important;" id="{{ call.id }}">0</span>
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
        <!-- 显示呼叫中心话务数据End -->
    {% endif %}
    {% if isEnableGroup == 1 %}
        <div class="tabbable">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active" id="que_active">
                    <a href="#que" data-toggle="tab">按技能组</a>
                </li>
                <li id="group_active">
                    <a href="#group" data-toggle="tab">按业务组</a>
                </li>
            </ul>
            <div class="tab-content no-border">
                <div class="tab-pane in active" id="que">
                    <div class="row" style="margin:1px;">
                        <!-- 显示技能组话务数据Begin -->
                        {% if is_que_show == 1 %}
                        {% for key,que in que_agInfo %}
                            <!-- 创建panel BEGIN-->
                            <div class="panel panel-info" id="que{{ que.id }}">
                                <div class="panel-heading">{{ que.que_name }}</div>
                                <div class="panel-body" style="padding: 2px;">
                                    {% for key,value in que_center %}
                                    <div class="progress" style="height:80px">
                                        {% for ques in value %}
                                            <div class="progress-bar" style="width: {{ rates.que_rate[key] }};background-color: {{ ques.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span style="font: 180% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important">{{ ques.name }}</span><br>
                                                <span style="font: 200% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important" id="que{{ que.id }}_{{ ques.id }}">0</span>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    {% endfor %}
                                    {% if is_agent_show == 1 %}
                                        <div class="progress" name="strip" id="que{{ que.id }}_strip" style="height:100%; padding-left: 0;">
                                        </div>
                                        <div id="que{{ que.id }}_agent"></div>
                                    {% endif %}
                                </div>
                            </div>
                            <!-- 创建panel END-->
                        {% endfor %}
                        {% else %}
                            <div class="alert alert-block alert-danger">
                                <button type="button" class="close" data-dismiss="alert">
                                    <i class="ace-icon fa fa-times"></i>
                                </button>
                                <i class="ace-icon fa fa-times"></i>
                                未设置技能组指标
                            </div>
                        {% endif %}
                        <!-- 显示技能组话务数据End -->
                    </div>
                </div>
                <div class="tab-pane" id="group">
                    <div class="row" style="margin:1px;">
                        <!-- 显示业务组话务数据Begin -->
                        {% if is_group_show == 1 %}
                        {% for k,group in group_agInfo %}
                            <!-- 创建panel BEGIN-->
                            <div class="panel panel-info" id="group{{ group.group_id }}">
                                <div class="panel-heading">{{ group.group_name }}</div>
                                <div class="panel-body" style="padding: 2px;">
                                    {% for key,value in group_center %}
                                    <div class="progress" style="height:80px">
                                        {% for groups in value %}
                                            <div class="progress-bar" style="width: {{ rates.group_rate[key] }};background-color: {{ groups.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span style="font: 180% Arial; font-size: {{ groups.style.fontSize }};color: {{ groups.style.fontColor }} !important">{{ groups.name }}</span><br>
                                                <span style="font: 200% Arial; font-size: {{ groups.style.fontSize }};color: {{ groups.style.fontColor }} !important" id="group{{ group.group_id }}_{{ groups.id }}">0</span>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    {% endfor %}
                                    {% if is_agent_show == 1 %}
                                        <div class="progress" name="strip" style="height:100%; padding-left: 0px;" id="group{{ group.group_id }}_strip"></div>
                                        <div id="group{{ group.group_id }}_agent"></div>
                                    {% endif %}
                                </div>
                            </div>
                            <!-- 创建panel END-->
                        {% endfor %}
                        {% else %}
                            <div class="alert alert-block alert-danger">
                                <button type="button" class="close" data-dismiss="alert">
                                    <i class="ace-icon fa fa-times"></i>
                                </button>
                                <i class="ace-icon fa fa-times"></i>
                                未设置业务组指标
                            </div>
                        {% endif %}
                        <!-- 显示业务组话务数据End -->
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        {% if is_que_show == 1 %}
            <!-- 显示技能组话务数据Begin -->
            <div class="row" style="margin:1px;">
                {% for key,que in que_agInfo %}
                    <!-- 创建panel BEGIN-->
                    <div class="panel panel-info" id="que{{ que.id }}">
                        <div class="panel-heading">{{ que.que_name }}</div>
                        <div class="panel-body" style="padding: 2px;">
                            {% for key,value in que_center %}
                            <div class="progress" style="height:80px">
                                {% for ques in value %}
                                    <div class="progress-bar" style="width: {{ rates.que_rate[key] }};background-color: {{ ques.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                                        <span class="sr-only"> 10% Complete (success) </span>
                                        <span style="font: 180% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important">{{ ques.name }}</span><br>
                                        <span style="font: 200% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important" id="que{{ que.id }}_{{ ques.id }}">0</span>
                                    </div>
                                {% endfor %}
                            </div>
                            {% endfor %}
                            {% if is_agent_show == 1 %}
                                <div class="progress" name="strip" id="que{{ que.id }}_strip" style="height:100%; padding-left: 0;">
                                </div>
                                <div id="que{{ que.id }}_agent"></div>
                            {% endif %}
                        </div>
                    </div>
                    <!-- 创建panel END-->
                {% endfor %}
            </div>
            <!-- 显示技能组话务数据End -->
        {% endif %}
        {% if is_que_show == 0 and is_agent_show == 1 %}
            {% for key,que in que_agInfo %}
                <div class="panel panel-info" id="que{{ que.id }}">
                    <div class="panel-heading">{{ que.que_name }}</div>
                    <div class="panel-body" style="padding: 2px;">
                        <div class="progress" name="strip" style="height:80px; padding-left: 0px;" id="que{{ que.id }}_strip"></div>
                        <div id="que{{ que.id }}_agent"></div>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    {% endif %}
</div>
{% else %}
{% if is_call_show == 1 %}
<!-- 显示呼叫中心话务数据Begin -->
<div class="row" style="margin:1px;">
    {% for key,value in call_center %}
    <div class="progress" style="height:80px">
        {% for call in value %}
            <div class="progress-bar" style="background-color: {{ call.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.call_rate[key] }}">
                <span class="sr-only"> 10% Complete (success) </span>
                <span style="font: 180% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important">{{ call.name }}</span><br>
                <span style="font: 200% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important" id="{{ call.id }}">0</span>
            </div>
        {% endfor %}
    </div>
    {% endfor %}
</div>
<!-- 显示呼叫中心话务数据End -->
{% endif %}
{% if is_que_show == 1 and user_type == 1 %}
<!-- 显示技能组话务数据Begin -->
    <div class="row" style="margin:1px;">
    {% for key,que in qgInfo %}
        <!-- 创建panel BEGIN-->
        <div class="panel panel-info" id="que{{ que.id }}">
            <div class="panel-heading">{{ que.que_name }}</div>
            <div class="panel-body" style="padding: 2px;">
                {% for key,value in que_center %}
                <div class="progress" style="height:80px">
                    {% for ques in value %}
                    <div class="progress-bar" style="width: {{ rates.que_rate[key] }};background-color: {{ ques.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                        <span class="sr-only"> 10% Complete (success) </span>
                        <span style="font: 180% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important">{{ ques.name }}</span><br>
                        <span style="font: 200% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important" id="que{{ que.id }}_{{ ques.id }}">0</span>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
                {% if is_agent_show == 1 %}
                <div class="progress" name="strip" id="que{{ que.id }}_strip" style="height:100%; padding-left: 0;">
                </div>
                <div id="que{{ que.id }}_agent"></div>
                {% endif %}
            </div>
        </div>
        <!-- 创建panel END-->
    {% endfor %}
    </div>
<!-- 显示技能组话务数据End -->
{% endif %}
{% if is_group_show == 1 and user_type == 3 and isEnableGroup == 1 %}
<!-- 显示业务组话务数据Begin -->
    {% for k,group in qgInfo %}
        <!-- 创建panel BEGIN-->
        <div class="panel panel-info" id="group{{ group.group_id }}">
            <div class="panel-heading">{{ group.group_name }}</div>
            <div class="panel-body" style="padding: 2px;">
                {% for key,value in group_center %}
                <div class="progress" style="height:80px">
                    {% for groups in value %}
                    <div class="progress-bar" style="width: {{ rates.group_rate[key] }};background-color: {{ groups.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                        <span class="sr-only"> 10% Complete (success) </span>
                        <span style="font: 180% Arial; font-size: {{ groups.style.fontSize }};color: {{ groups.style.fontColor }} !important">{{ groups.name }}</span><br>
                        <span style="font: 200% Arial; font-size: {{ groups.style.fontSize }};color: {{ groups.style.fontColor }} !important" id="group{{ group.group_id }}_{{ groups.id }}">0</span>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
                {% if is_agent_show == 1 %}
                    <div class="progress" name="strip" style="height:100%; padding-left: 0px;" id="group{{ group.group_id }}_strip"></div>
                    <div id="group{{ group.group_id }}_agent"></div>
                {% endif %}
            </div>
        </div>
        <!-- 创建panel END-->
    {% endfor %}
<!-- 显示业务组话务数据End -->
{% endif %}
{% if is_que_show == 0 and is_group_show == 0 and is_agent_show == 1 %}
        <!-- 显示坐席监控数据Begin -->
        {% if agent_center.type == 1 %}
            <!-- 按技能组方式显示 -->
            {% for key,que in qgInfo %}
            <div class="panel panel-info" id="que{{ que.id }}">
                <div class="panel-heading">{{ que.que_name }}</div>
                <div class="panel-body" style="padding: 2px;">
                    <div class="progress" name="strip" style="height:100%; padding-left: 0px;" id="que{{ que.id }}_strip"></div>
                    <div id="que{{ que.id }}_agent"></div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            {% if isEnableGroup == 1 %}
                <!-- 按业务组方式显示 -->
                {% for k,group in qgInfo %}
                <div class="panel panel-info" id="group{{ group.group_id }}">
                    <div class="panel-heading">{{ group.group_name }}</div>
                    <div class="panel-body" style="padding: 2px;">
                        <div class="progress" name="strip" style="height:100%; padding-left: 0px;" id="group{{ group.group_id }}_strip"></div>
                        <div id="group{{ group.group_id }}_agent"></div>
                    </div>
                </div>
                {% endfor %}
            {% endif %}
        {% endif %}
        <!-- 显示坐席监控数据End -->
{% endif %}
{% endif %}
</div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@IcsocUIBundle/Resources/public/js/amazeui.min.js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
<script type="text/javascript">
    var agentLimit = {{ agentLimit|raw }};
    var agentStyle = {{ agentStyle|raw }};
    $(document).ready(function() {
        var timeInterval = null;
        var queInterval = null;
        var groupInterval = null;
        var agentInterval = null;
        var refresh_time = parseInt('{{ refresh_time }}');
        refresh_time = refresh_time * 1000;
        {% if is_call_show == 1 %}
        get_call_center_data();
        window.setInterval(get_call_center_data, refresh_time);
        {% endif %}
        {% if user_type == 0 %}
            {% if isEnableGroup == 0 %}
                {% if is_que_show == 1 %}
                    get_que_center_data();
                    queInterval = window.setInterval(get_que_center_data, refresh_time);
                    {% if is_agent_show == 1 %}
                        get_agent_center_data(1);
                        timeInterval = window.setInterval(refreshTime, 1000);
                        agentInterval = window.setInterval(function () {
                            get_agent_center_data(1)
                        }, refresh_time);
                    {% endif %}
                {% endif %}
            {% else %}
                if ($("#que_active").attr('class') == 'active') {
                    {% if is_que_show == 1 %}
                        get_que_center_data();
                        queInterval = window.setInterval(get_que_center_data, refresh_time);
                        {% if is_agent_show == 1 %}
                            get_agent_center_data(1);
                            timeInterval = window.setInterval(refreshTime, 1000);
                            agentInterval = window.setInterval(function () {
                                get_agent_center_data(1)
                            }, refresh_time);
                        {% endif %}
                    {% endif %}
                }
            {% endif %}

            {% if isEnableGroup ==1 %}
                if ($("#group_active").attr('class') == 'active') {
                    {% if is_group_show ==1 %}
                        get_group_center_data();
                        groupInterval = window.setInterval(get_group_center_data, refresh_time);
                        {% if is_agent_show == 1 %}
                            get_agent_center_data(2);
                            timeInterval = window.setInterval(refreshTime, 1000);
                            agentInterval = window.setInterval(function () {
                                get_agent_center_data(2)
                            }, refresh_time);
                        {% endif %}
                    {% endif %}
                }
            {% endif %}
        {% elseif is_que_show == 1 and isEnableGroup == 0 or user_type == 1 %}
            get_que_center_data();
            queInterval = window.setInterval(get_que_center_data, refresh_time);
            {% if is_agent_show == 1 %}
                get_agent_center_data(1);
                timeInterval = window.setInterval(refreshTime, 1000);
                agentInterval =window.setInterval(function(){get_agent_center_data(1)}, refresh_time);
            {% endif %}
        {% elseif user_type == 3 and is_group_show == 1 and isEnableGroup == 1 %}
            get_group_center_data();
            groupInterval = window.setInterval(get_group_center_data, refresh_time);
            {% if is_agent_show == 1 %}
                get_agent_center_data(2);
                timeInterval = window.setInterval(refreshTime, 1000);
                agentInterval =window.setInterval(function(){get_agent_center_data(2)}, refresh_time);
            {% endif %}
        {% elseif is_que_show == 0 and is_group_show == 0 and is_agent_show == 1 %}
            {% if agent_center.type == 1 %}
                get_agent_center_data(1);
                timeInterval = window.setInterval(refreshTime, 1000);
                agentInterval =window.setInterval(function(){get_agent_center_data(1)}, refresh_time);
            {% elseif agent_center.type == 2 and isEnableGroup == 1 %}
                get_agent_center_data(2);
                timeInterval = window.setInterval(refreshTime, 1000);
                agentInterval =window.setInterval(function(){get_agent_center_data(2)}, refresh_time);
            {% endif %}
        {% endif %}
        $("#myTab li").on('click', function() {
            var id = $(this).attr('id');
            if (id == 'group_active') {
                clearInterval(queInterval);
                clearInterval(timeInterval);
                clearInterval(agentInterval);
                {% if is_group_show == 1 %}
                    groupInterval = window.setInterval(get_group_center_data, refresh_time);
                    {% if is_agent_show == 1 %}
                        timeInterval = window.setInterval(refreshTime, 1000);
                        agentInterval =window.setInterval(function(){get_agent_center_data(2)}, refresh_time);
                    {% endif %}
                {% endif %}
            } else if (id == 'que_active') {
                clearInterval(groupInterval);
                clearInterval(timeInterval);
                clearInterval(agentInterval);
                {% if is_que_show == 1 %}
                    queInterval = window.setInterval(get_que_center_data, refresh_time);
                    {% if is_agent_show == 1 %}
                        timeInterval = window.setInterval(refreshTime, 1000);
                        agentInterval =window.setInterval(function(){get_agent_center_data(1)}, refresh_time);
                    {% endif %}
                {% endif %}
            }
        });
        $("#open_window").on('click', function() {
            var url = self.location.href;
            url = url + "&is_fullscreen=1";
            window.open(url);
        });
        {% if is_fullscreen == 0 %}
            $("#open_window").css('display', '');
            $("#open_fullscreen").css('display', 'none');
            $("#close_fullscreen").css('display', 'none');
        {% else %}
            $("#open_window").css('display', 'none');
            $("#open_fullscreen").css('display', '');
            $("#close_fullscreen").css('display', '');
        {% endif %}
    });

    //获取呼叫中心话务数据
    function get_call_center_data()
    {
        var url = "{{ path('icsoc_monitor_screen_callcenter_data') }}";
        $.ajax({
            type: 'post',
            url: url,
            data: {'call_data':'{{ json_call_center }}', 'role_id': '{{ role_id }}'},
            dataType: 'json',
            cache: false,
            success: function(responce)
            {
                if (responce.code == 200) {
                    $.each(responce.data, function(index,value) {
                        if ($("#"+index).length > 0) {
                            //证明此元素存在
                            $("#"+index).html(value);
                        }
                    });
                } else {
                    console.info(responce);
                }
            }
        });
    }

    //获取技能组话务数据
    function get_que_center_data()
    {
        var ques = [];
        var que_id = "";
        {% if user_type == 0 and is_que_show == 1%}
            {% for key,que in que_agInfo %}
                ques.push('{{ que.id }}');
            {% endfor %}
            que_id = ques.join(",");
        {% elseif is_que_show == 1 and user_type == 1 %}
            {% for key,que in qgInfo %}
                ques.push('{{ que.id }}');
            {% endfor %}
            que_id = ques.join(",");
        {% endif %}
        //调用获取技能组数据地址
        var url = "{{ path('icsoc_monitor_screen_quecenter_data') }}";
        $.ajax({
            type: 'post',
            url: url,
            data: {'que_data':'{{ json_que_center }}','que_id':que_id, 'role_id': '{{ role_id }}'},
            dataType: 'json',
            cache: false,
            success: function(responce)
            {
                if (responce.code == 200) {
                    $.each(responce.data, function(index,value) {
                        //此index为技能组ID
                        if ($("#que"+index).length > 0) {
                            $.each(value, function(key, item) {
                                if ($("#que"+index+"_"+key).length > 0) {
                                    $("#que"+index+"_"+key).html(item);
                                }
                            });
                        }
                    });
                } else {
                    console.info(responce);
                }
            }
        });
    }

    //获取业务组话务数据
    function get_group_center_data()
    {
        var groups = [];
        var group_id = "";
        {% if user_type == 0 and is_group_show == 1 %}
            {% for k,group in group_agInfo %}
                groups.push('{{ group.group_id }}');
            {% endfor %}
            group_id = groups.join(",");
        {% elseif user_type == 3 and is_group_show == 1 %}
            {% for k,group in qgInfo %}
                groups.push('{{ group.group_id }}');
            {% endfor %}
            group_id = groups.join(",");
        {% endif %}
        //调用获取业务组数据
        var url = "{{ path('icsoc_monitor_screen_groupcenter_data') }}";
        $.ajax({
            type: 'post',
            url: url,
            data: {'group_data':'{{ json_group_center }}','group_id':group_id, 'role_id': '{{ role_id }}'},
            dataType: 'json',
            cache: false,
            success: function(responce)
            {
                if (responce.code == 200) {
                    $.each(responce.data, function(index,value) {
                        //此index为业务组ID
                        if ($("#group"+index).length > 0) {
                            $.each(value, function(key, item) {
                                if ($("#group"+index+"_"+key).length > 0) {
                                    $("#group"+index+"_"+key).html(item);
                                }
                            });
                        }
                    });
                } else {
                    console.info(responce);
                }
            }
        });
    }

    //获取坐席监控数据
    function get_agent_center_data(press)
    {
        var ques = [];
        var que_id = "";
        var groups = [];
        var group_id = "";
        var type = 1;
        var url = "{{ path('icsoc_monitor_screen_agentcenter_data') }}";
        var rand = "";
        //无限技能组权限
        {% if user_type == 0 %}
        if (press == 1) {
            //按技能组
            {% if is_que_show == 1 %}
                {% for key,que in que_agInfo %}
                    ques.push('{{ que.id }}');
                {% endfor %}
                que_id = ques.join(',');
                type = 1;
                rand = '{{ rand1 }}';
            {% endif %}
        } else {
            {% if is_group_show == 1 %}
                {% for k,group in group_agInfo %}
                    groups.push('{{ group.group_id }}');
                {% endfor %}
                group_id = groups.join(',');
                type = 2;
                rand = '{{ rand2 }}';
            {% endif %}
        }
        {% endif %}
        //获取权限技能组数据
        {% if is_que_show == 1 and user_type == 1 %}
            {% for key,que in qgInfo %}
                ques.push('{{ que.id }}');
            {% endfor %}
            que_id = ques.join(',');
            type = 1;
            rand = '{{ rand1 }}';
        {% endif %}
        //获取权限业务组数据
        {% if is_group_show == 1 and user_type == 3 %}
            {% for k,group in qgInfo %}
                groups.push('{{ group.group_id }}');
            {% endfor %}
            group_id = groups.join(',');
            type = 2;
            rand = '{{ rand2 }}';
        {% endif %}
        {% if is_que_show == 0 and is_group_show == 0 and is_agent_show == 1 %}
        //获取所有技能组数据
        {% if agent_center.type == 1 %}
            {% for key,que in qgInfo %}
            ques.push('{{ que.id }}');
            {% endfor %}
            que_id = ques.join(',');
            type = 1;
            rand = '{{ rand1 }}';
        //获取所有业务组数据
        {% else %}
            {% for k,group in qgInfo %}
            groups.push('{{ group.group_id }}');
            {% endfor %}
            group_id = groups.join(',');
            type = 2;
            rand = '{{ rand2 }}';
        {% endif %}
        {% endif %}
        $.ajax({
            type: 'post',
            url: url,
            data: {'que_id':que_id, 'group_id':group_id, 'role_id': '{{ role_id }}', 'only_show_strip':0, 'type':type, 'rand':rand},
            dataType: 'json',
            cache: false,
            success: function(responce) {
                if (responce.code == 200) {
                    var id = "";
                    if (type == 1) {
                        id = "#que";
                    } else {
                        id = "#group";
                    }
                    //显示工具条
                    if (responce.agentStrip != "") {
                        $("div[name='strip']").each(function() {
                            $(this).empty();
                            var real_id = "#"+$(this).attr('id');
                            //循环所有的strip
                            $.each(responce.agentStrip, function(index, value) {
                                if (id+index+"_strip" == real_id) {
                                    var tmp = '';
                                    $.each(value, function(key, item) {
                                        tmp += '<div class="progress-bar" style="background-color: '+agentStyle[key]['background']+' !important;padding: 3px;width:'+item.rate+';line-height: 18px;">';
                                        tmp += '<span class="sr-only">10% Complete (success) </span>';
                                        tmp += '<span style="font: 200% Arial;color:'+agentStyle[key]['fontColor']+' !important;font-size:20px">'+item.num+'</span>';
                                        tmp += '</div>';
                                    });
                                    $(id+index+"_strip").html(tmp);
                                }
                            });
                        });
                    } else {
                        $.each($("div [name='strip']"), function(i, v) {
                            $(this).empty();
                        });
                    }
                    //显示坐席数据
                    if (responce.agentData != "") {
                        $.each(responce.agentData, function(index, value) {
                            if ($(id+index+"_agent").length > 0) {
                                $.each(value, function(key, item) {
                                    var btn_id = "que"+index+"btn_"+item.ag_id;
                                    if (item.type == 2 || item.type == 1) {
                                        //新增
                                        var btn = create_btn(item, btn_id);
                                        $("#"+btn_id).parent().remove();
                                        $(id+index+"_agent").append(btn);
                                    } else if (item.type == 3) {
                                        //删除
                                        $("#"+btn_id).parent().remove();
                                    } else {
                                        //删除
                                        $("#"+btn_id).parent().remove();
                                    }
                                });
                            }

                            var div = $(id+index+"_agent"+" span").toArray().sort(function(a,b){
                                return parseInt($(a).attr('sort')) - parseInt($(b).attr('sort'))
                            });
                            $(div).appendTo(id+index+"_agent");
                        });
                    }
                }
            }
        });
    }

    /**
     * 新建坐席
     *
     * @param item
     * @param id
     * @returns {string}
     */
    function create_btn(item,id)
    {
        var _strr = "";
        _strr += "<span sort='"+item.ag_sta+"'><button id='"+id+"' type=\"button\" class=\"btn\" style=\"margin: 1px;padding: 1px;width:73px;height:65px;border-color:"+agentStyle[item.ag_sta]['background']+" !important;background-color:"+agentStyle[item.ag_sta]['background']+" !important;color:"+agentStyle[item.ag_sta]['fontColor']+" !important;font-size:"+agentStyle[item.ag_sta]['fontSize']+"\">";
        _strr += "<div>" +item.ag_name+"</div>";
        _strr += "<div>" +item.status+"</div>";
        _strr += "<div class='secs' data='"+item.ag_sta_time+"'>" +item.status_secs+"</div>";
        _strr += "</button></span>";

        return _strr;
    }

    //刷新时间
    function refreshTime()
    {
        $('.secs').each(function() {
            var secs = parseInt($(this).attr("data"));
            var agsta = $(this).parent().parent().attr('sort');
            var status = $(this).parent().children().eq(1).html();
            agsta = parseInt(agsta);
            if (agentLimit[agsta] == 0) {
                $(this).parent().children().eq(1).html(status);
            } else {
                if (secs >= agentLimit[agsta]) {
                    if ($(this).parent().children().eq(1).find("strong").length > 0) {
                        $(this).parent().children().eq(1).html(status);
                    } else {
                        $(this).parent().children().eq(1).html("<strong style='font: 90% 微软雅黑;color: red !important;font-weight:bold;'>!</strong>&nbsp;"+status);
                    }
                } else {
                    $(this).parent().children().eq(1).html(status);
                }
            }
            secs++;
            $(this).html(formate_time(secs));
            $(this).attr("data", secs);
        });
    }

    //格式化时间
    function formate_time(dur)
    {
        if(dur < 0)
        {
            return '';
        }
        else
        {
            var hour = parseInt(dur/3600);
            dur = dur%3600;
            var minute = parseInt(dur/60);
            var second = dur%60;
            if(hour < 10)
            {
                hour = "0"+hour;
            }
            if(minute < 10)
            {
                minute = "0"+minute;
            }
            if(second < 10)
            {
                second = "0"+second;
            }

            var format_dur = hour+":"+minute+":"+second;
            return format_dur;
        }
    }

    /**
     * 调用全屏操作
     */
    function fn_fullscreen()
    {
        var e = $.AMUI.fullscreen;
        if (e.enabled) {
            e.request();
        } else {
            // Ignore or do something else
        }
    }

    /**
     * 退出全屏状态
     */
    function close_fullscreen()
    {
        var e = $.AMUI.fullscreen;
        if (e.enabled) {
            e.exit();
        } else {
            // Ignore or do something else
        }
    }
</script>
{% endblock %}